<script setup lang="ts">
import type { IconType } from './PngIcon.vue'

defineProps<{
  currentTab: TabType
}>()

type TabType = '剪辑' | '剪同款' | '创作课堂' | '消息' | '我的'
interface TabBarType {
  name: TabType
  icon: IconType
}

const tabList: TabBarType[] = [
  {
    name: '剪辑',
    icon: 'clip',
  },
  {
    name: '剪同款',
    icon: 'clipSame',
  },
  {
    name: '创作课堂',
    icon: 'classroom',
  },
  {
    name: '消息',
    icon: 'info',
  },
  {
    name: '我的',
    icon: 'user',
  },
]
</script>

<template>
  <ul class="tab bg-#181818 b-#333333 border-t-1">
    <li v-for="item in tabList" :key="item.name" class="flex-col-center">
      <png-icon :icon="item.icon" />
      <div class="flex-center h-2em">
        <div v-if="currentTab === item.name" class="bg-#FF2B54 w-2em h-4px rounded-full" />
        <div v-else class="text-sm">
          {{ item.name }}
        </div>
      </div>
    </li>
  </ul>
</template>
<style  lang="scss" scoped>
@media screen and (min-width:440px) {
  .tab {
    padding-top: 12px;
    border-top-width: 1px;
    display: flex;
    width: 100%;
    bottom: 0;
    position: absolute;
    justify-content: space-evenly;
  }
}
@media screen and (max-width:440px) {
  .tab {
  padding-top: 12px;
  border-top-width: 1px;
  justify-content: space-around;
  display: flex;
  width: 100vw;
  bottom: 0;
  position: fixed;
}
}


</style>